<template lang="">
    <h3 >{{ $t('yinH') }}<span >{{ $t('niKe') }}</span></h3>
    <div class="brank-container">
        <div>
          <a-spin tip="Loading..." :spinning="loading">
          
          <a-page-header :title="$t('zhang-0')" style="padding: 0">
            <template #extra>
              <a-button v-if="userBrankList.length > 0"  key="1" type="primary" @click="onAddBankCard">{{ $t('tian-3') }}</a-button>
            </template>
          </a-page-header>
          <!-- <h4>账户列表</h4> -->
          
          <div v-if="userBrankList.length > 0" class="brank-list">
            <div 
              class="content reset-bank"
              v-for="(item, index) in userBrankList"
              :style="'background-color:' + item.backgroundColor"
              :key="'crad-item' + index"
              :title="item.bank_name" 
            >
              <p class="name">
                <img class="f-bank-pic" :src="item.logo" onerror="this.style.opacity=0" > 
                {{ item.bank_name }}
              </p>
              <p class="number">{{ item.bank_type === 1 ? item.address : item.number }}</p>
            </div>
          </div>
          <div v-else class="no_bank">
            <img :src="getAssetsImages('add_bank.png')" width="320" />
            <p data-v-6d21de08="">{{ $t('zanW') }}</p>
            <button class="gradients_btn" @click="onAddBankCard">{{ $t('liJi-0') }}</button>
          </div>
          </a-spin>
        </div>
        <AddBankModal 
          :visible="hasVisibleAddBankModal" 
          @cancel="onCloseAddBankModal" 
          @ok="onSubmitAddBankModal"/>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { getAssetsImages, maskBankCard } from '@/utils';
import AddBankModal from '@/views/Admin/components/AddBankModal.vue'
import { getUserBankCardList } from '@/api/financial';
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const userBrankList = ref<any[]>([]);
const hasVisibleAddBankModal = ref<boolean>(false);
const loading = ref<boolean>(true);

const fetchUserBankList = () => {
  loading.value = true;
  getUserBankCardList()
    .then((data: any) => {
      const banks = data.list || [];
      const colors = ["#FF5733", "#C70039", "#900C3F", "#581845", "#FFC300", "#DAF7A6", "#581845",
        "#FF5733", "#C70039", "#900C3F", "#581845", "#FFC300", "#DAF7A6", "#581845"];

      for (var i = 0; i < banks.length; i++) {
        var color = colors[banks[i].id % colors.length];
        banks[i].backgroundColor = color;
        banks[i].number = maskBankCard(banks[i].number || '');
        banks[i].address = maskBankCard(banks[i].address || '');
      }
      userBrankList.value = banks;

      console.log('用户银行卡', banks);
    })
    .finally(() => {
      loading.value = false;
    })
}

onBeforeMount(() => {
  fetchUserBankList();
});

const onAddBankCard = () => {
  hasVisibleAddBankModal.value = true;
}

const onCloseAddBankModal = () => {
  hasVisibleAddBankModal.value = false;
}
const onSubmitAddBankModal = () => {
  hasVisibleAddBankModal.value = false;
  fetchUserBankList();
}
</script>

<style lang="less">
.brank-container {
  .brank-list {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;

    .content {
      border-radius: 2px;
      width: 30%;
      margin: 10px;
      height: 80px;
      padding: 10px;
      line-height: 25px;
      color: #fff;

      .name {
        display: flex;
        align-items: center;
        margin-bottom: 0;
      }
      .f-bank-pic {
        width: 25px;
        height: 25px;
        margin-right: 5px;
      }

      .number {
        padding-left: 30px;
      }
    }
  }

  .no_bank {
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .no_bank p {
    margin-top: 47px;
    color: #94a6b7
  }

  .no_bank button {
    width: 152px;
    height: 50px;
    margin-top: 62px;
    font-size: 18px;
    line-height: 48px;
    height: 48px
  }
}
</style>